<template>
  <div class="road">
     <div class="tools">
      <el-checkbox-group :disabled="loading" v-model="search.type" @change="getList">
        <el-checkbox-button value="0,1,2">全&nbsp;部</el-checkbox-button>
        <el-checkbox-button value="0">掘&nbsp;进</el-checkbox-button>
        <el-checkbox-button value="1">采&nbsp;面</el-checkbox-button>
        <el-checkbox-button value="2">其&nbsp;他</el-checkbox-button>
      </el-checkbox-group>
    </div>
    <div class="road-list" v-loading="loading">
      <template v-for="(item, index) in list" :key="index">
        <div class="road-item" @click="handleFocus(item)">
          <div class="road-title">
            {{ item.areaName }}
             <el-icon size="14" @click="handleClick(item, '1')">
               <Document/>
             </el-icon>
          </div>
          <!-- 0 掘进 1 采面 2 其他 -->
          <div class="road-info">
            <div v-if="item.type !== '2'" class="flex-row" v-for="index in Math.floor(infoList.length / 2)"
              :key="index">
              <div class="flex-col" v-for="node in infoList.slice((index - 1) * 2, (index - 1) * 2 + 2)"
                :key="node.value">
                <div class="flex-title">{{ node.title(item.workType) }}：</div>
                <div class="flex-value">
                  {{ item[node.value] || '--' }}
                </div>
              </div>
            </div>
            <el-button-group>
              <el-button size="small" @click.stop="handleClick(item, '2')">传感器({{ item.sensorCount || '0'
                }})</el-button>
              <el-button size="small" @click.stop="handleClick(item, '3')">视频({{ item.cameraCount || '0' }})</el-button>
              <el-button size="small" @click.stop="handleClick(item, '4')">人员({{ item.peopleCount || '0' }})</el-button>
            </el-button-group>
          </div>
        </div>
      </template>
      <div v-if="isEmty" class="status">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import RoadDetail from './roadDetail/roadDetail.vue'
import { getAreaList, getTunnelIdByAreaId } from '@/api/road'
import { useDialog } from '@/hooks/useDialog'
import { useAuthStore } from '@/store/auth'
import { storeToRefs } from 'pinia'
import { Document } from '@element-plus/icons-vue'
import emiter from '@/utils/mitt'

const infoList = [
  {
    title: () => '工作面类型',
    value: 'workType'
  },
  {
    title: () => '工作面状态',
    value: 'currentStatusName'
  },
  {
    title: (workType: string) => (workType === '采面' ? '采煤工艺' : '掘进方法'),
    value: 'workMothod'
  },
  {
    title: () => '所属煤层',
    value: 'coalSeamName'
  },
  {
    title: () => '支护方式',
    value: 'methodType'
  },
  {
    title: () => '智能化工作面',
    value: 'isIntelligentWorkFaceName'
  },
  {
    title: () => '单班定员(人)',
    value: 'workNum'
  },
  {
    title: (workType: string) => (workType === '采面' ? '初始回采' : '初始掘进'),
    value: 'initWorkDate'
  },
  {
    title: (workType: string) => (workType === '采面' ? '走向长度(m)' : '设计长度(m)'),
    value: 'designLen'
  },
  {
    title: (workType: string) => (workType === '采面' ? '累计总推进(m)' : '累计总进尺(m)'),
    value: 'accruedAllFootage'
  },
  {
    title: (workType: string) => (workType === '采面' ? '工作面进度' : '巷道进度'),
    value: 'finish'
  }
]
const authStore = useAuthStore()
const { globalParams } = storeToRefs(authStore)
const interval = ref<number | null>(null)

const search = ref({
  type: []
})

onMounted(async () => {
  getList()
  // 每分钟更新一次
  interval.value = setInterval(async () => {
    await getList()
  }, 60000)
  // 监听全局参数变化事件
  watch(() => globalParams.value, () => {
    getList()
  }, { immediate: true, deep: true })
})

onUnmounted(() => {
  if (interval.value) {
    clearInterval(interval.value)
  }
})

const list = ref([])
const isEmty = ref(false)
const loading = ref(false)
async function getList () {
  loading.value = true
  const res = await getAreaList({type: search.value.type.join(',')})
  list.value = res.data
  if (list.value.length === 0) {
    isEmty.value = true
  } else {
    isEmty.value = false
  }
  loading.value = false
}
const { openDialog } = useDialog()

async function handleFocus (item) {
  const { data } = await getTunnelIdByAreaId(item.areaId)
  emiter.emit('areaChange', data)
}

function handleClick (item, active: string) {
  openDialog(item.areaName, RoadDetail, { ...item, active }, {
    width: 950,
    height: 400
  })
}
</script>

<style scoped lang="scss">
.road {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;

  .tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 16px;
  }

  .road-list {
    flex: 1;
    overflow-y: auto;
    padding-left: 16px;
    direction: rtl;

    .road-item {
      cursor: pointer;
      direction: ltr;
      margin-bottom: 8px;
      background: var(--bg-color-page);
      padding: 8px;

      .road-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 14px;
      }

      .flex-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;

        .flex-col {
          width: 50%;
          text-align: right;
          display: flex;
          justify-content: space-between;
          color: var(--text-color-disabled);
          align-items: center;
          margin-bottom: 8px;

          .flex-title {
            text-align: right;
          }

          .flex-value {
            flex: 1;
            text-align: left;
            color: var(--el-color-primary);
          }
        }
      }
    }
  }
}

.status {
  text-align: center;
  padding: 8px 0;
}
</style>
